<template>
	<view class="detail-block">
		<view class="hint-option">
			<view class="left"></view>
			<view class="txt">商品详情</view>
			<view class="right"></view>
		</view>
		<view class="content">
			<!-- <rich-text :nodes="nodes"></rich-text> -->
			<view class="title" v-if="detailBlockData.text">
				{{detailBlockData.text}}
			</view>
			<view v-if="detailBlockData.imgs.length>0">
				<block v-for="(item,index) in detailBlockData.imgs">
					<image :src="item" class="img-class"  mode="widthFix"></image>
				</block>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			detailBlockData: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.detail-block {

		.hint-option {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.left {
				width: 216rpx;
				height: 2rpx;
				background: linear-gradient(-128.5deg, rgba(27, 25, 25, 1) 0%, rgba(166, 166, 166, 0) 100%)
			}

			.txt {
				margin: 0 18rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(27, 25, 25, 1);
			}

			.right {
				width: 216rpx;
				height: 2rpx;
				background: linear-gradient(128.5deg, rgba(27, 25, 25, 1) 0%, rgba(166, 166, 166, 0) 100%);
			}
		}

		.title {
			padding: 20rpx 24rpx;
		}

		.img-class {
			width: 100%;
		}
	}
</style>
